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React 入 门 教程 


按照 惯例 ， 在 介绍 一 个 新 技术 之 前 前 总 总 是 要 为 CH BAD > 作为 React 受众 在 开始 接触 
之 前 肯定 会 有 一 些 喜闻乐见 的 疑问 : 


at 


e 为 什么 不 用 Backbone ? 
e 为 什么 不 用 Angular? 


在 没有 真正 使 用 之 前 ， ney > 没有 最 好 的 ， 只 有 最 合适 的 ， 如 
Why React 所 说 ，Give it five minutes， 布 望 你 能 克服 初次 遇 到 JSX 这 种 存在 的 偏 
ZRT 


因为 官方 文档 组 织 得 比较 散乱 ， 和 希望 本 教程 能 成 为 一 个 不 错 的 入 门 参 考 。 
有 任何 问题 — Github 


本 文档 对 应 React v0.14.x， 使 用 ES6 ° 


React 概览 


React 的 核心 思想 是 : 封装 组 件 。 
各 个 组 件 维护 自己 的 状态 和 UI， 当 状态 变更 ， 自 动 重新 演 染 整个 组 件 。 


基于 这 种 方式 的 一 个 直观 感受 就 是 我 们 不 再 需要 不 厌 其 烦 地 来 回 查找 某 个 DOM 元 
素 ， 然 后 操作 DOM 去 更 改 Ul。 


React 大 体 包 含 下 面 这 些 概念 : 


e 组 件 

e JSX 

e Virtual DOM 

e Data Flow 
这 里 通过 一 个 简单 的 组 件 来 快速 了 解 这 些 概念 ， 以 及 建立 起 对 React 的 一 个 总 体 认 
识 。 


import React, { Component } from 'react'; 
import { render } from 'react-dom'; 


class HelloMessage extends Component { 


render() { 
return <div>Hello {this.props.name}</div>; 
} 
} 
// 加 载 组 件 到 DOM Æ% mountNode 


render(<HelloMessage name="John" />, mountNode); 


组 件 


React 应 用 都 是 构建 在 组 件 之 上 。 


上 面 的 HelloMessage 就 是 一 个 React 构建 的 组 件 ， 最 后 一 名 render 会 把 这 
个 组 件 显示 到 页 面 上 的 某 个 元 素 mountNode 里面， 显示 的 内 容 就 是 


<div>Hello John</div> ° 


props 是 组 件 包 含 的 两 个 核心 概念 之 一 ， 另 一 个 是 state (这 个 组 件 没 用 
到 ) 。 可 以 把 props 看 作 是 组 件 的 配置 属性 ， 在 组 件 内 部 是 不 变 的 ， 只 是 在 调用 
这 个 组 件 的 时 候 传 入 不 同 的 属性 (比如 这 里 的 name ) 来 定制 显示 这 个 组 件 。 


JSX 


从 上 面 的 代码 可 以 看 到 将 HTML EAT JS 代码 里 面 ， 这 个 就 是 React 提出 的 
一 种 叫 JSX 的 语法 ， 这 应 该 是 最 开始 接触 React 最 不 能 接受 的 设 定之 一 ， 因 为 前 
端 被 “表现 和 逻辑 层 分 离 ? 这 种 思想 “洗脑 " 太 久 了 。 但 实际 上 组 件 的 HTML 是 组 成 一 
个 组 件 不 可 分 割 的 一 部 分 ， 能 够 将 HTML 封装 起 来 才 是 组 件 的 完全 体 ，React 发 明 
了 JSX 让 JS R44 A HTML 不 得 不 说 是 一 种 非常 聪明 的 做 法 ， 让 前 端 实现 览 正 意 
义 上 的 组 件 化 成 为 了 可 能 。 


好 消息 是 你 可 以 不 一 定 使 用 这 种 语法 ， 后 面 会 进一步 介绍 JSX， 到 时 候 你 可 能 就 会 
喜欢 上 了 。 现 在 要 知道 的 是 ， 要 使 用 包含 JSX 的 组 件 ， 是 需要 “编译 "输出 JS 代码 
才能 使 用 的 ， 之 后 就 会 讲 到 开发 环境 。 


Virtual DOM 


当 组 件 状 态 state 有 更 改 的 时 候 ，React 会 自动 调用 组 件 的 render 方法 重新 
泻 染 整个 组 件 的 Ul。 


当然 如 果 瘟 的 这 样 大 面积 的 操作 DOM， 性 能 会 是 一 个 很 大 的 问题 ， 所 以 React 实 
现 了 一 个 Virtual DOM ， 组 件 DOM 结构 就 是 映射 到 这 个 Virtual DOM 上 ，React 在 
这 个 Virtual DOM 上 实现 了 一 个 diff 算法 ， 当 要 重新 泻 染 组 件 的 时 候 ， 会 通过 diff 
寻找 到 要 变更 的 DOM 节点 ， 再 把 这 个 修改 更 新 到 浏览 器 实际 的 DOM 节点 上 ， 所 
VAS REA Ek 19 7S EES DOM 树 。 这 个 Virtual DOM 是 一 个 纯粹 的 JS 数据 结 
构 ， 所 以 性 能 会 比 原生 DOM 快 很 多 。 


Data Flow 


“ 单 向 数据 绑 定 ?是 React 推 棠 的 一 种 应 用 架构 的 方式 。 当 应 用 足够 复杂 时 才能 体会 
到 它 的 好 处 ， 虽 然 在 一 般 应 用 场景 下 你 可 能 不 会 意识 到 它 的 存在 ， 也 不 会 影响 你 开 
始 使 用 React， 你 只 要 先知 道 有 这 么 个 概念 。 


开发 环境 配置 


要 搭建 一 个 现代 的 前 端 开发 环境 配套 的 工具 有 很 多 ， 比 如 Grunt / Gulp / Webpack / 
Broccoli， 都 是 要 解决 前 端 工程 化 问题 ， 这 个 主题 很 大 ， 这 里 为 了 使 用 React 我 们 
只 关注 其 中 的 两 个 点 : 


e JSX 支持 
e ES6 支持 


好 消息 是 业界 领先 的 ES6 编译 工具 Babel 随 着 作者 被 Facebook 招 入 旗下 ， 已 经 
内 置 了 对 JSX 的 支持 ， 我 们 只 需要 配置 Babel 一 个 编译 工具 就 可 以 了 ， 配 合 
webpack 非常 方便 。 


Webpack 配置 React 开发 环境 


Webpack 是 一 个 前 端 资源 加 载 /打包 工具 ， 只 需要 相对 简单 的 配置 就 可 以 提供 前 端 
工程 化 需要 的 各 种 功能 ， 并 且 如 果 有 需要 它 还 可 以 被 整合 到 其 他 比如 Grunt / Gulp 
的 工作 流 2 


安装 Webpack : npm install -g webpack 


Webpack 使 用 一 个 名 为 webpack.config.js 的 配置 文件 ， 要 编译 ISX? ALR 
对 应 的 loader: npm install babel-loader --save-dev 


假设 我 们 在 当前 工程 目录 有 一 个 入 口 文 件 entry.js > React 组 件 放置 在 一 个 
components/ 目录 下 ， 组 件 被 entry.js 引用 ， 要 使 用 entry.js ， 我 们 把 
这 个 文件 指定 输出 到 dist/bundle.js ，Webpack 配置 如 下 : 


var path = require('path'); 


module.exports = { 
entry: './entry.js', 
output: { 
path: path.join(__dirname, '/dist'), 
filename: 'bundle.js' 


ty 
resolve: { 
extensions: ['', .js ， .jsx | 
ty 
module: { 
loaders: [ 
{ test: /\.js|jsx$/, loaders: ['babel'] } 
] 
} 


resolve 指定 可 以 被 import 的 文件 后 级 。 比 如 Hello.jsx 这 样 的 文件 就 可 
以 直接 用 import Hello from 'Hello' 引用 。 


loaders 指定 babel-loader 编译 后 缓 名 为 ,js 或 者 jsx 的 文件 ， 这 样 你 就 
可 以 在 这 两 种 类 型 的 文件 中 自由 使 用 JSX 和 ES6 了 。 


监听 编译 : webpack -d --watch 
更 多 关于 Webpack 的 介绍 


e Webpack-howto 


JSX 


为 什么 要 引入 SSK 这 种 语法 


传统 的 MVC 是 将 模板 放 在 其 他 地 方 ， 比 如 <script> 标签 或 者 模板 文件 ， 再 在 
JS 中 通过 某 种 手段 引用 模板 。 按 照 这 种 思路 ， 想 想 多 少 次 我 们 面 对 四 处 分 散 的 模 
板 片 area eR | E> ARR AE > A 44047 5] ARR. T 
是 一 段 React 官方 的 看 法 : 


We strongly believe that components are the right way to separate concerns 
rather than "templates" and "display logic." We think that markup and the 
code that generates it are intimately tied together. Additionally, display logic is 
often very complex and using template languages to express it becomes 
cumbersome. 


简单 来 说 ，React 认为 组 件 才 是 王道 ， 而 组 件 是 和 模板 紧密 关联 的 ， 组 件 模板 和 组 
件 逻 辑 分 离 让 问题 复杂 化 了 。 显 而 易 见 的 道理 ， 关 键 是 怎么 做 ? 


所 以 就 有 了 SSX 这 种 语法 ， 就 是 为 了 把 HTML 模板 直接 嵌入 到 JS 代码 里 面 ， 这 样 
就 做 到 了 模板 和 组 件 关联 ， 但 是 JS 不 支持 这 种 包含 HTML 的 语法 ， 所 以 需要 通过 
工具 将 JSX 编译 输出 成 JS 代码 才能 使 用 。 


JSX 有 是 可 选 的 


因为 JSX 最 终 是 输出 成 JS 代码 来 表达 的 ， 所 以 我 们 可 以 直接 用 React 提供 的 这 
DOM 构建 方法 来 写 模 板 ， 比 如 一 个 JSX 写 的 一 个 链接 : 


<a href="http://facebook.github.io/react/">Hello! </a> 
用 JS 代码 来 写 就 成 这 样 了 : 


React.createElement('a', {href: 'http://facebook.github.io/react/'- 
Ki EE 














你 可 以 通过 ~React.createElement 来 构造 组 件 的 DOM 树 。 第 一 个 参数 是 标签 
名 ， 第 二 个 参数 是 属性 对 象 ， 第 三 个 参数 是 子 元 素 。 


一 个 包 合 子 元 杀 的 例子 : 
var child = React.createElement('li', null, 'Text Content'); 


var root = React.createElement('ul', { className: 'my-list' }, chi- 
React.render(root, document.body); 


到 








对 于 常见 的 HTML 标签 ，React 已 经 内 置 了 工厂 方法 : 


var root = React.DOM.ul({ className: 'my-list' }, 
React .DOM.1i(null, 'Text Content') 
); 


所 以 JSX 和 JS 之 间 的 转换 也 很 简单 直观 ， 用 JSX 的 好 处 就 是 它 基 本 上 就 是 
HTML 《后 面 会 讲 到 有 一 些小 差异 ) ， 对 于 构造 DOM 来 说 我 们 更 熟悉 ， 更 具 可 读 
性 o 


KF ISX 映射 成 JS TH > WH Virtual DOM 的 内 部 描述 ， 参 见 Virtual DOM 
Terminology， 如 果 你 不 想 使 用 JSX， 直 接 使 用 JS 就 是 用 这 里 面 提 到 的 接口 方法 。 


使 用 ISX 


利用 ISX 编写 DOM 结构 ， 可 以 用 原生 的 HTML 标签 ， 也 可 以 直接 像 普通 标签 一 
样 引 用 React 组 件 。 这 两 者 约定 通过 大 小 写 来 区分， 小 写 的 字符 串 是 HTML 标 
签 ， 大 写 开头 的 变量 是 React 组 件 。 


使 用 HTML 标签 : 


import React from 'react'; 
import { render } from 'react-dom'; 


var myDivElement = <div className="foo" />; 
render(myDivElement, document.getElementById('mountNode')); 


HTML 里 的 class 在 JSX 里 要 写成 className > AA class 在 JS 里 是 保 
留 关 键 字 。 同 理 某 些 属 性 比如 for 要 写成 htmlFor ° 


使 用 组 件 : 


import React from 'react'; 
import { render } from 'react-dom'; 
import MyComponent from './MyComponet'; 


var myElement = <MyComponent someProperty={true} />; 
render(myElement, document .body); 


使 用 JavaScript 表达 式 


属性 值 使 用 表达 式 ， 只 要 用 {} BR: 


7/ Anpute (ISX): 
var person = <Person name={window.isLoggediIn ? window.name : ''} Æ 
7/ Output, (Is): 
var person = React.createElement ( 
Person, 
{name: window.isLoggedIn ? window.name : ''} 


); 
了 
子 组 件 也 可 以 作为 表达 式 使 用 : 








#7 Input (JSX): 
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}< 
77 OULD (Js): 
var content = React.createElement( 
Container, 
nul, 
window.isLoggediIn ? React.createElement(Nav) : React.createElemer 


); 
a a > 





注释 


在 JSX 里 使 用 注释 也 很 简单 ， 就 是 沿用 JavaScript， 唯 一 要 注意 的 是 在 一 个 组 件 的 
子 元 素 位 置 使 用 注释 要 用 {} 包 起 来 。 


var content = ( 
<Nav> 
{/* child comment, put {} around */} 
<Person 
A Mek 
line 
comment */ 
name={window.isLoggedIn ? window.name : ''} // end of line 
/> 
</Nav> 


); 





HTML #% 3l 


React 会 将 所 有 要 显示 到 DOM 的 字符 串 转 义 ， 防 止 XSS。 所 以 如 果 ISX 中 含有 
转 义 后 的 实体 字符 比如 &copy; (©) 最 后 显示 到 DOM 中 不 会 正确 显示 ， 因 为 
React 自动 把 &copy; 中 的 特殊 字符 转 义 了 。 有 几 种 解决 办 法 : 


。 直接 使 用 UTF-8 字符 © 

o 使 用 对 应 字符 的 Unicode 编码 ， 查 询 编 码 

o 使 用 数组 组 装 <div>{['cc ', <span>&copy;</span>, ' 2015']}</div> 
e 直接 插入 原始 的 HTML 


<div dangerouslySetInnerHTML={{__ html: 'cc &copy; 2015'}} /> 


日 定义 HTML 属性 


如 果 在 JSX 中 使 用 的 属性 不 存在 于 HTML 的 规范 中 ， 这 个 属性 会 被 忽略 。 如 果 要 
使 用 自 定 义 属 性 ， 可 以 用 data- We 


可 访问 性 属性 的 前 级 aria- 也 是 支持 的 。 


支持 的 标签 和 属性 


如 果 你 要 使 用 的 某 些 标签 或 属性 不 在 这 些 支持 列表 里 面 就 可 能 被 React 忽略 ， 必 须 
要 使 用 的 话 可 以 提 issue， 或 者 用 前 面 提 到 的 dangerouslySetInnerHTML ° 


属性 扩散 
有 时 候 你 需要 给 组 件 设 置 多 个 属性 ， 你 不 想 一 个 个 写 下 这 些 属 性 ， 或 者 有 时 候 你 其 
至 不 知道 这 些 属性 的 名 称 ， 这 时 候 spread attributes 的 功能 就 很 有 用 了 。 
比如 : 
var props = {}; 
props.foo = x; 


props.bar = y; 
var component = <Component {...props} />; 


props 对 象 的 属性 会 被 设置 成 Component 的 属性 。 


By VEX] VB : 


var props = { foo: 'default' }; 
var component = <Component {...props} foo={'override'} />; 
console.log(component.props.foo); // 'override' 


写 在 后 面 的 属性 值 会 覆盖 前 面 的 属性 。 


关于 ... 操作 符 


The ... operator (or spread operator) is already supported for arrays in 
ES6. There is also an ES7 proposal for Object Rest and Spread Properties. 


JSX 5 HTML 的 差 弄 


除了 前 面 提 到 的 class 要 写成 className ， 比 较 典 型 的 还 有 : 


e style 属性 接受 由 CSS 属性 构成 的 JS THR 
e onChange 事件 表现 更 接近 我 们 的 直觉 (不 需要 onBlur 去 触发 ) 
o 表单 的 表现 差异 比较 大 ， 要 单独 再 讲 


更 多 异同 ， 可 以 参见 DOM Differences 


React 组 件 


可 以 这 么 说 ， 一 个 React 应 用 就 是 构建 在 React 组 件 之 上 的 。 
组 件 有 两 个 核心 概念 : 


e props 
e state 


一 个 组 件 就 是 通过 这 两 个 属性 的 值 在 render 方法 里 面 生成 这 个 组 件 对 应 的 
HTML 结构 。 


注意 : 组 件 生成 的 HTML 结构 只 能 有 一 个 单一 的 根 节点 。 


props 


前 面 也 提 到 很 多 次 了 ， props 就 是 组 件 的 属性 ， 由 外 部 通过 ISX 属性 传 入 设 
置 ， 一 旦 初始 设置 完成 ， 就 可 以 认为 this.props 是 不 可 更 改 的 ， 所 以 不 要 轻 多 
更 改 设置 this.props 里 面 的 值 (虽然 对 于 一 个 JS 对 象 你 可 以 做 任何 事 ) 。 


state 


state 是 组 件 的 当前 状态 ， 可 以 把 组 件 简单 看 成 一 个 “状态 机 ?”， 根 据 状态 
state 呈现 不 同 的 UI 展示 。 


一 旦 状态 (数据 ) 更改， 组 件 就 会 自动 调用 render 重新 泻 染 UI， 这 个 更 改 的 动 
作 会 通过 this.setState 方法 来 触发 。 

划分 状态 数据 

一 条 原则 : 让 组 件 尽 可 能 地 少 状 态 。 

这 样 组 件 逻 辑 就 越 容 易 维 护 。 


什么 样 的 数据 属性 可 以 当 作 状 态 ? 


当 更 改 这 个 状态 (数据 ) 需要 更 新 组 件 Ul 的 就 可 以 认为 是 state ， 下 面 这 些 可 
以 认为 不 是 状态 : 


o 可 计算 的 数据 : 比如 一 个 数组 的 长 度 
e 和 props 重复 的 数据 : 除非 这 个 数据 是 要 做 变更 的 


回 过 头 来 反复 看 几 遍 Thinking in React， 相 信 会 对 组 件 有 更 深刻 的 认识 。 


无 状态 组 件 


你 也 可 以 用 纯粹 的 函数 来 定义 无 状态 的 组 件 (stateless function)， 这 种 组 件 没有 状 
态 ， 没 有 生命 周期 ， 只 是 简单 的 接受 props È R EAR DOM 结构 。 无 状态 组 件 非 常 
简单 ， 开 销 很 低 ， 如 果 可 能 的 话 尽 量 使 用 无 状态 组 件 。 比 如 使 用 箭头 函数 定义 : 


const HelloMessage = (props) => <div> Hello {props.name}</div>; 
render(<HelloMessage name="John" />, mountNode); 


因为 无 状态 组 件 只 是 函数 ， 所 以 它 没有 实例 返回 ， 这 点 在 想 用 refs 获取 无 状态 组 件 
的 时 候 要 注意 ， 参 见 DOM 操作 。 


组 件 生命 周期 


一 般 来 说 ， 一 个 组 件 类 由 extends Component 创建， 并且 提供 一 个 render 
方法 以 及 其 他 可 选 的 生命 周期 函数 、 组 件 相关 的 事件 或 方法 来 定义 。 


一 个 简单 的 例子 : 


import React, { Component } from "react 
import { render } from 'react-dom'; 


class LikeButton extends Component { 
constructor(props) { 
super(props); 
this.state = { liked: false }; 


handleClick(e) { 
this.setState({ liked: !this.state.liked }); 


} 
render() { 
const text = this.state.liked ? 'like' : 'haven\'t liked'; 
return ( 
<p onClick={this.handleClick.bind(this) }> 
You {text} this. Click to toggle. 
</p> 
); 
} 
} 
render( 
<LikeButton />, 
document .getElementById('example' ) 
); 


getInitialState 


初始 化 this.state 的 值 ， 只 在 组 件 装载 之 前 调用 一 次 。 
如 果 是 使 用 ES6 的 语法 ， 你 也 可 以 在 构造 函数 中 初始 化 状态 ， 比 如 : 
class Counter extends Component { 
constructor(props) { 


super (props); 
this.state = { count: props.initialCount }; 


render() { 


IY, 


} 
} 


getDefaultProps 
只 在 组 件 创建 时 调用 一 次 并 缓存 返回 的 对 象 〈 即 在 React.createclass 之 后 就 
会 调用 ) 。 


因为 这 个 方法 在 实例 初始 化 之 前 调用 ， 所 以 在 这 个 方法 里 面 不 能 依赖 this 获取 
到 这 个 组 件 的 实例 。 


在 组 件 装载 之 后 ， 这 个 方法 缓存 的 结果 会 用 来 保证 访问 this.props 的 属性 时 ， 
当 这 个 属性 没有 在 父 组 件 中 传 入 (在 这 个 组 件 的 JSX 属性 里 设置 ) ， 也 总 是 有 值 
的 。 


如 果 是 使 用 ES6 语法 ， 可 以 直接 定义 defaultProps 这 个 类 属性 来 替代 ， 这 样 
能 更 直观 的 知道 default props 是 预先 定义 好 的 对 象 值 : 


Counter.defaultProps = { initialCount: © }; 


render 


必须 


装 生成 这 个 组 件 的 HTML 结构 (使 用 原生 HTML 标签 或 者 子 组 件 ) ， 也 可 以 返 
回 null 或 者 false ， 这 时 候 ReactDOM.findDOMNode(this) 会 返回 
null ° 


Ear Jel FA ee 
装载 组 件 触发 


componentWillMount 


只 会 在 装载 之 前 调用 一 次 ， 在 render 之 前 调用 ， 你 可 以 在 这 个 方法 里 面 调 用 
setState 改变 状态 ， 并 且 不 会 导致 额外 调用 一 次 render 


componentDidMount 


只 会 在 装载 完成 之 后 调用 一 次 ， 在 render 之 后 调用 ， 从 这 里 开始 可 以 通 
ReactDOM.findDOMNode(this) 获取 到 组 件 的 DOM 节点 


更 新 组 件 触 发 
这 些 方法 不 会 在 首次 render 组 件 的 周期 调用 


e componentWillReceiveProps 
e shouldComponentUpdate 
e componentWillUpdate 


e componentDidUpdate 


印 载 组 件 触发 


e componentWillUnmount 
更 多 关于 组 件 相关 的 方法 说 明 ， 参 见 


e Component Specs 
e Component Lifecycle 
e Component API 


事件 处 理 
一 个 简单 的 例子 : 


import React, { Component } from 'react'; 
import { render } from 'react-dom'; 


class LikeButton extends Component { 
constructor(props) { 
super(props); 
this.state = { liked: false }; 


handleClick(e) { 
this.setState({ liked: !this.state.liked }); 


} 
render() { 
const text = this.state.liked ? 'like' : 'haven\'t liked'; 
return ( 
<p onClick={this.handleClick.bind(this) }> 
You {text} this. Click to toggle. 
</p> 
); 
} 
} 
render ( 


<LikeButton />, 
document .getElementById('example' ) 


); 


可 以 看 到 React 里 面 绑 定 事件 的 方式 和 在 HTML 中 绑 定 事件 类 似 ， 使 用 驼峰 式 命 
名 指定 要 绑 定 的 onClick 属性 为 组 件 定 义 的 一 个 方法 
{this.handleClick.bind(this)} ° 


注意 要 显 式 调用 bind(this) 将 事件 函数 上 下 文 绑 定 要 组 件 实例 上 ， 这 也 是 
React 推崇 的 原则 : 没有 黑 科 技 ， 尽 量 使 用 显 式 的 容易 理解 的 JavaScript 代码 。 


6 合成 事件 ?和 “4“ 原 生 事 件 ” 


React 实现 了 一 个 “合成 事件 " 层 (synthetic event system) ， 这 个 事件 模型 保证 了 
和 W3C 标准 保持 一 致 ， 所 以 不 用 担心 有 什么 诡异 的 用 法 ， 并 且 这 个 事件 层 消除 了 
IE 与 W3C 标准 实现 之 间 的 兼容 问题 。 


“合成 事件 "还 提供 了 额外 的 好 处 : 

事件 委托 

“合成 事件 "会 以 事件 委托 (event delegation) 的 方式 绑 定 到 组 件 最 上 层 ， 并 且 在 组 
IFR (unmount) 的 时 候 自动 销毁 绑 定 的 事件 。 

什么 是 “原生 事件 ”? 


比如 你 在 componentDidMount 方法 里 面 通过 addEventListener 绑 定 的 事件 
就 是 浏览 器 原生 事件 。 


使 用 原生 事件 的 时 候 注 意 在 “componentwiLLUnmount RRE 


removeEventListener ° 


所 有 通过 ISX 这 种 方式 绑 定 的 事件 都 是 绑 定 到 “合成 事件 ”， 除 非 你 有 特别 的 理由 ， 
建议 总 是 用 React 的 方式 处 理事 件 。 


Tips 
关于 这 两 种 事件 绑 定 的 使 用 ， 这 里 有 必要 分 享 一 些 额 外 的 人 生 经 验 


如 果 混 用 “合成 事件 "和 “原生 事件 *"， 比 如 一 种 常见 的 场景 是 用 原生 事件 在 document 
上 绑 定 ， 然 后 在 组 件 里 面 绑 定 的 合成 事件 想 要 通过 e.stopPropagation() 来 阻 
止 事 件 冒 泡 到 document， 这 时 候 是 行 不 通 的 ， 参 见 Event delegation’ AA 
e.stopPropagation 是 内 部 “合成 事件 " 层面 的 ， 解 决 方法 是 要 用 
e.nativeEvent.stopImmediatePropagation() 


"合成 事件 “的 event 对 象 只 在 当前 event loop 有 效 ， 比 如 你 想 在 事件 里 面 调用 


一 个 promise， 在 resolve 之 后 去 拿 evet 对 象 会 拿 不 到 〈 并 且 没 有 错误 抛 
出 ) 


handleClick(e) { 
promise.then(() => doSomethingWith(e)); 


详情 见 Event pooling 说 明 。 


参数 传递 
给 事件 处 理 函 数 传递 额外 参数 的 方式 : bind(this, arg1, arg2, ...) 


render: function() { 

return <p onClick={this.handleClick.bind(this, 'extra param' )}: 
ty 
handleClick: function(param, event) { 

// handle click 





React 支持 的 事件 列表 


DOM 操作 


大 部 分 情况 下 你 不 需要 通过 查询 DOM 元 素 去 更 新 组 件 的 UI， 你 只 要 关注 设置 组 件 
的 状态 ( setState ) 。 但 是 可 能 在 某 些 情况 下 你 确实 需要 直接 操作 DOM © 


首先 我 们 要 了 解 ReactDOM.render 组 件 返 回 的 是 什么 ? 


它 会 返回 对 组 件 的 引用 也 就 是 组 件 实例 (对 于 无 状态 状态 组 件 来 说 返回 null) ， 注 
意 JSX 返回 的 不 是 组 件 实例 ， 它 只 是 一 个 ReactElement 对 象 (还 记得 我 们 用 
纯 JS 来 构建 JSX 的 方式 吗 ) ， 比 如 这 种 : 


// A ReactElement 


const myComponent = <MyComponent /> 


// render 
const myComponentInstance = ReactDOM.render(myComponent, mountNode 
myComponentInstance.doSomething( ); 


a] B eae 





findDOMNode() 


当 组 件 加 载 到 页 面 上 之 后 (mounted) ， 你 都 可 以 通过 react-dom 提供 的 
findDOMNode() 方法 拿 到 组 件 对 应 的 DOM 元 素 。 


import { findDoMNode } from 'react-dom'; 


// Inside Component class 
componentDidMound() { 
const el = findDOMNode(this); 


findDOMNode() 不 能 用 在 无 状态 组 件 上 。 


Refs 


另外 一 种 方式 就 是 通过 在 要 引用 的 DOM 元 素 上 面 设置 一 个 ref 属性 指定 一 个 名 
称 ， 然 后 通过 this.refs.name 来 访问 对 应 的 DOM 元 素 。 


比如 有 一 种 情况 是 必须 直接 操作 DOM 来 实现 的 ， 你 希望 一 个 <input/> 元 素 在 
尔 清空 它 的 值 时 focus， 你 没 法 仅仅 靠 state 来 实现 这 个 功能 。 


class App extends Component { 
constructor() { 
return { userInput: '' }; 


handleChange(e) { 
this.setState({ userInput: e.target.value }); 


clearAndFocusInput() { 
this.setState({ userInput: '' }, () => { 
this.refs.theInput.focus(); 


}); 


render() { 
return ( 
<div> 
<div onClick={this.clearAndFocusInput.bind( this) }> 
Click to Focus and Reset 
</div> 
<input 
ref="theInput" 
value={this.state.userInput} 
onChange={this.handleChange.bind(this)} 
ie 
</div> 


); 


如 果 ref 是 设置 在 原生 HTML 元 素 上 ， 它 拿 到 的 就 是 DOM 元 素 ， 如 果 设 置 在 自 
定义 组 件 上 ， 它 拿 到 的 就 是 组 件 实例 ， 这 时 候 就 需要 通过 findDOMNode 来 拿 到 
组 件 的 DOM 元素。 


因为 无 状态 组 件 没有 实例 ， 所 以 ref 不 能 设置 在 无 状态 组 件 上 ， 一 般 来 说 这 没什么 
问题 ， 因 为 无 状态 组 件 没 有 实例 方法 ， 不 需要 ref 去 拿 实例 调用 相关 的 方法 ， 但 是 
如 果 想 要 拿 无 状态 组 件 的 DOM 元 素 的 时 候 ， 就 需要 用 一 个 状态 组 件 封装 一 层 ， 然 
后 通过 ref 和 findDOMNode 去 获取 。 
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o 你 可 以 使 用 ref 到 的 组 件 定 义 的 任何 公共 方法 ， 比 如 
this.refs.myTypeahead.reset() 

e Refs 是 访问 到 组 件 内 部 DOM 节点 唯一 可 靠 的 方法 

e Refs 会 自动 销毁 对 子 组 件 的 引用 〈 当 子 组 件 删除 时 ) 


注意 事项 


。 不 要 在 render 或 者 render 之 前 访问 refs 
。 不 要 滥用 refs ， 比 如 只 是 用 它 来 按照 传统 的 方式 操作 界面 UI: 找到 DOM - 
> 更 新 DOM 


组 合 组 件 
使 用 组 件 的 目的 就 是 通过 构建 模块 化 的 组 件 ， 相 互 组 合 组 件 最 后 组 装 成 一 个 复杂 的 


在 React 组 件 中 要 包含 其 他 组 件 作 为 子 组 件 ， 只 需要 把 组 件 当 作 一 个 DOM 元 素 引 
入 就 可 以 了 。 


一 个 例子 : 一 个 显示 用 户头 像 的 组 件 Avatar 包含 两 个 子 组 件 ProfilePic È 
示 用 户头 像 和 ProfileLink 显示 用 户 链接 : 


import React from 'react'; 
import { render } from 'react-dom'; 


const ProfilePic = (props) => { 
return ( 
<img src={'http://graph.facebook.com/' + props.username + '/pic 


); 


const ProfileLink = (props) => { 
return ( 
<a href={'http://ww.facebook.com/' + props.username}> 
{props.username} 
</a> 


); 


const Avatar = (props) => { 
return ( 
<div> 
<ProfilePic username={props.username} /> 
<ProfileLink username={props.username} /> 
</div> 


); 


render ( 
<Avatar username="pwh" />, 
document.getElementById('example' ) 


); 
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通过 props 传递 值 。 


循环 插入 子 元素 


如 果 组 件 中 包含 通过 循环 插入 的 子 元 素 ， 为 了 保证 重新 泻 娄 Ul 的 时 候 能 够 正确 显 
示 这 些 子 元 素 ， 每 个 元 素 都 需要 通过 一 个 特殊 的 key 属性 指定 一 个 唯一 值 。 具 体 
原因 见 这 里 ， 为 了 内 部 diff 的 效率 。 


key 必须 直接 在 循环 中 设置 : 
const ListItemWrapper = (props) => <li>{props.data.text}</1li>; 


const MyComponent = (props) => { 
return ( 
<ul> 
{props.results.map((result) => { 
return <ListItemWrapper key={result.id} data={result}/>; 


is 


</ul> 


); 


你 也 可 以 用 一 个 key 值 作为 属性 ， 子 元 素 作为 属性 值 的 对 象 字面 量 来 显示 子 元 素 
列表 ， 虽 然 这 种 用 eis 有 限 ， 参 见 Keyed Fragments， 但 是 在 这 种 情况 下 要 注 
意 生 成 的 子 元 素 重新 泻 染 后 在 DOM 中 显示 的 顺序 问题 。 


实际 上 浏览 器 在 遍历 一 个 字面 量 对 象 的 时 候 会 保持 顺序 一 致 ， 除 非 存 在 属性 值 可 以 
被 转换 成 整数 值 ， 这 种 属性 值 会 排序 并 放 在 其 他 属性 之 前 被 遍历 到 ， 所 以 为 了 防止 
这 种 情况 发 生 ， 可 以 在 构建 这 个 字面 量 的 时 候 在 key 值 前 面 加 字符 串 前 组， 比 
如 : 


render() { 
var items = {}; 


this.props.results.forEach((result) => { 
// If result.id can look like a number (consider short hashes), 
// object iteration order is not guaranteed. In this case, we é 
// to ensure the keys are strings. 
items['result-' + result.id] = <li>{result.text}</li>; 


+); 


return ( 
<ol> 
{items} 
</ol> 


); 





this.props.children 


组 件 标签 里 面包 含 的 子 元 素 会 通过 props.children 传递 进来 。 


比如 : 


React.render(<Parent><Child /></Parent>, document .body); 


React .render (<Parent><span>hello</span>{'world'}</Parent>, document 





HTML 元 素 会 作为 React 组 件 对 象 、JS 表达 式 结果 是 一 个 文字 节点 ， 都 会 存 入 
Parent 组 件 的 props.children 。 


一 般 来 说 ， 可 以 直接 将 这 个 属性 作为 父 组 件 的 子 元 素 render : 
const Parent = (props) => <div>{props.children}</div>; 


we 


props.children 通常 是 一 个 组 件 对 象 的 数组 ， 但 是 当 只 有 一 个 子 元 素 的 时 
候 ， props.children 将 是 这 个 唯一 的 子 元 素 ， 而 不 是 数组 了 。 


React.Children 提供 了 额外 的 方法 方便 操作 这 个 属性 。 


组 件 间 通信 


父子 组 件 间 通信 


这 种 情况 下 很 简单 ， 就 是 通过 props 属性 传递 ， 在 父 组 件 给 予 组 件 设置 


props ， 然 后 子 组 件 就 可 以 通过 props 访问 到 父 组 件 的 数据 一 方法 ， 这 样 就 搭 
建 起 了 父子 组 件 间 通信 的 桥梁 。 


import React, { Component } from 'react'; 
import { render } from 'react-dom'; 


class GroceryList extends Component { 
handleClick(i) { 


console.log('You clicked: ' + this.props.items[i]); 


render() { 
return ( 
<div> 
{this.props.items.map((item, i) => { 
return ( 
<div onClick={this.handleClick.bind(this, i)} key={i}>: 
); 
})} 


</div> 


); 


render ( 


<GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNe 





div 可 以 看 作 一 个 子 组 件 ， 指 定 它 的 onClick 事件 调用 父 组 件 的 方法 。 


父 组 件 访 问 子 组 件 ? 用 refs 


x 


非 父 子 组 件 间 的 通信 


使 用 全 局 事件 Pub/Sub 模式 ， 在 componentDidMount 里 面 订阅 事件 ， 在 
componentwillUnmount 里 面 取 消 订 阅 ， 当 收 到 事件 触发 的 时 候 调用 
setState 更 新 Ul。 
这 种 模式 在 复杂 的 系统 里 面 可 能 会 变 得 难以 维护 ， 所 以 看 个 人 权衡 是 否 将 组 件 封装 
到 大 的 组 件 ， 甚 至 整个 页 面 或 者 应 用 就 封装 到 一 个 组 件 。 
一 般 来 说 ， 对 于 比较 复杂 的 应 用 ， 推 荐 使 用 类 似 Flux 这 种 单项 数据 流 架构 ， 参 见 


Data Flow ° 


Mixins 
NOTE: 使 用 ES6 class 定义 的 组 件 已 经 不 支持 mixin 了 ， 因 为 使 用 mixin 的 场景 都 
可 以 用 组 合 组 件 这 种 模式 来 做 到 ， 参 见 Mixins Are Dead. Long Live Composition 


这 里 暂时 留存 这 部 分 内 容 。 


虽然 组 件 的 原则 就 是 模块 化 ， 彼 此 之 间 相 互 独立 ， 但 是 有 时 候 不 同 的 组 件 之 间 可 能 
会 共用 一 些 功能 ， 共 享 一 部 分 代码 。 所 以 React 提供 了 mixins 这 种 方式 来 处 理 
这 种 问题 。 


Mixin 就 是 用 来 定义 一 些 方法 ， 使 用 这 个 mixin 的 组 件 能 够 自由 的 使 用 这 些 方法 
(就 像 在 组 件 中 定义 的 一 样 ) ， 所 以 mixin 相当 于 组 件 的 一 个 扩展 ， 在 mixin 中 也 
能 定义 “生命 周期 "方法 。 


比如 一 个 定时 器 的 mixin : 


var SetIntervalMixin = { 


Pe 


var 


}); 


componentWillMount: function() { 
this.intervals = []; 


ty 


setInterval: function() { 


this.intervals.push(setInterval.apply(null, arguments)); 


ty 
componentWillUnmount: function() { 
this.intervals.map(clearInterval); 


TickTock = React.createClass({ 

mixins: [SetIntervalMixin], // Use the 

getInitialState: function() { 
return {seconds: 0}; 

tr 

componentDidMount: function() { 
this.setInterval(this.tick, 1000); 

tr 

tick: function() A 
this.setState({seconds: this.state 


ty 
render: function() { 
return ( 
<p> 


React has been running for 
</p> 
); 


React render ( 


); 


<Tickhock /> 
document .getElementById('example' ) 


mixin 


// Call a method on the 


.seconds + 1}); 


{this.state.seconds} sec 








React 的 mixins 的 强大 之 处 在 于 ， 如 果 一 个 组 件 使 用 了 多 个 mixins， 其 中 几 个 
mixins 定义 了 相同 的 “生命 周期 方法 "， 这 些 方法 会 在 组 件 相 应 的 方法 执行 完 之 后 
按 mixins 指定 的 数组 顺序 执行 。 


Data Flow 


Data Flow 只 是 一 种 应 用 架构 的 方式 ， 比 如 数据 如 何 存 放 ， 如 何 更 改 数 据 ， 如 何 通 
知 数据 更 改 等 等 ， 所 以 它 不 是 React 提供 的 额外 的 什么 新 功能 ， 可 以 看 成 是 使 用 
React 构建 大 型 应 用 的 一 种 最 佳 实践 。 


正 因 为 它 是 这 样 一 种 概念 ， 所 以 涌现 了 许多 实现 ， 这 里 主要 关注 两 种 实现 : 


e 官方 的 Flux 
o 更 优雅 的 Redux 


Flux 


React 标榜 自己 是 MVC 里面 V 的 部 分 ， 那 么 Flux 就 相当 于 添加 M 和 C 的 部 分 。 
Flux 是 Facebook 使 用 的 一 套 前 端 应 用 的 架构 模式 。 
一 个 Flux 应 用 主要 包含 四 个 部 分 : 
e the dispatcher 
处 理 动作 分 发 ， 维 护 Store 之 间 的 依赖 关系 
e the stores 
数据 和 逻辑 部 分 
e the views 
React 组 件 ， 这 一 层 可 以 看 作 controller-views， 作 为 视图 同时 响应 用 户 交 互 
e the actions 
提供 给 dispatcher 传递 数据 给 store 


针对 上 面 提 到 的 Flux 这 些 概念 ， 需 要 写 一 个 简单 的 类 库 来 实现 衔接 这 些 功能 ， 市 
面 上 有 很 多 种 实现 ， 这 里 讨论 Facebook 官方 的 一 个 实现 Dispatcher.js 


单 向 数据 流 
先 来 了 解 一 下 Flux 的 核心 “ 单 向 数据 流 “ 怎 么 运作 的 : 


Action -> Dispatcher -> Store -> View 


更 多 时 候 View 会 通过 用 户 交 互 触发 Action， 所 以 一 个 简单 完整 的 数据 流 类 似 这 
样 : 


Action creators are helper 
methods, collected into a library, 
that create an action from method 
parameters, assign it a type and 
provide it to the dispatcher. 


区 


Every action is sent to all After stores update themselves in response to 
stores via the callbacks the an action, they emit a change event. 
stores register with the 


2 Special views called controller-views, listen for 
dispatcher. 


change events, retrieve the new data from the 
stores and provide the new data to the entire 
tree of their child views. 





e 首先 要 有 action， 通 过 定义 一 些 action creator 方法 根据 需要 创建 Action 提供 
给 dispatcher 

e View 层 通过 用 户 交 互 (比如 onClick) 会 触发 Action 

e Dispatcher 会 分 发 触发 的 Action 给 所 有 注册 的 Store 的 回调 函数 

e Store 回调 函数 根据 接收 的 Action 更 新 自身 数据 之 后 会 触发 一 个 change 事件 
通知 View 数据 更 改 了 

e View 会 监听 这 个 change 事件 ， 拿 到 对 应 的 新 数据 并 调用 setState 更 新 组 
件 UI 


所 有 的 状态 都 由 Store 来 维护 ， 通 过 Action 传递 数据 ， 构 成 了 如 上 所 述 的 单 向 数据 
流 循 环 ， 所 以 应 用 中 的 各 部 分 分 工 就 相当 明确 ， 高 度 解 碍 了 。 


这 种 单 向 数据 流 使 得 整个 系统 都 是 透明 可 预测 的 。 


Dispatcher 


一 个 应 用 只 需要 一 个 dispatcher 作为 分 发 中 心 ， 管 理 所 有 数据 流向 ， 分 发 动作 给 
Store， 没 有 太 多 其 他 的 逻辑 (—+ action creator 方法 也 可 以 放 到 这 里 ) © 


eal 分 发 动作 给 Store 7 At AY I HH > 2K Fo —ALAY TT PR Ap RA A FF g He 
方 在 于 


。 回调 函数 不 是 订阅 到 某 一 个 特定 的 事件 /频道 ， 每 个 动作 会 分 发 给 所 有 注册 的 回 


调 函数 
。 回调 函数 可 以 指定 在 其 他 回调 之 后 调用 


基于 Flux 的 架构 思路 ，Dispatcher.js 提供 的 API 很 简单 : 


e register(function callback): string 注册 回调 函数 ， 返 回 一 个 token 供 在 
waitFor() 使 用 

e unregister(string id): void 通过 token 移 除 回调 

e waitFor(array ids): void 在 指定 的 回调 函数 执行 之 后 才 执 行当 前 回调 。 这 个 方 
法 只 能 在 分 发 动作 的 回调 函数 中 使 用 

e dispatch(object payload): void 分 发 动作 payload 给 所 有 注册 回调 

e isDispatching(): boolean 返回 Dispatcher 当前 是 否 处 在 分 发 的 状态 


dispatcher 只 是 一 个 粘 合 剂 ， 剩 余 的 Store、View、Action 就 需要 按 具 体 需 求 去 实 
现 了 。 


接 下 来 结合 flux-todomve 这 个 简单 的 例子 ， 提 取 其 中 的 关键 部 分 ， 看 一 下 实际 应 用 
中 如 何 衔接 Flux 整个 流程 ， 希 望 能 对 Flux 各 个 部 分 有 更 直观 深入 的 理解 。 


Action 


首先 要 创建 ciel 过 定义 一 些 gction creator 方法 来 创建 ， 这 些 方法 用 来 暴露 给 
外 部 调用 ， 通 过 dispatch 分 发 对 应 的 动作 ， 所 以 action creator 也 称 作 
dispatcher helper methods 辅助 dipatcher T£ ° 参见 actions/TodoActions.js 


var AppDispatcher = require('../dispatcher/AppDispatcher'); 
var TodoConstants = require('../constants/TodoConstants'); 


var TodoActions = { 
create: function(text) { 
AppDispatcher .dispatch({ 
actionType: TodoConstants.TODO_CREATE, 
text: text 
}); 
ty 


updateText: function(id, text) { 
AppDispatcher .dispatch({ 
actionType: TodoConstants.TODO_UPDATE_TEXT, 


id: id, 
text: text 
}); 


// 不 带 payload 数据 的 动作 
toggleCompleteAll: function() { 
AppDispatcher .dispatch({ 
actionType: TodoConstants.TODO_TOGGLE_COMPLETE_ALL 
}); 
} 
}; 


AppDispatcher 直接 继承 自 Dispatcherjs， 在 这 个 简单 的 例子 中 没有 提供 什么 额 
外 的 功能 。 Todoconstants 定义 了 动作 的 类 型 名 称 常量 。 


类 似 create ` updateText Æ action creator， 这 两 个 动作 会 通过 View 上 的 
用 户 交 互 触发 (比如 输入 框 ) 。 除 了 用 户 交互 会 创建 动作 ， 服 务 端 接口 调用 也 可 以 
用 来 创建 动作 ， 比 如 通过 Ajax 请 求 的 一 些 初始 数据 也 可 以 创建 动作 提供 给 
dispatcher， 再 分 发 给 store 使 用 这 些 初 始 数据 。 


action creators are nothing more than a call into the dispatcher. 


可 以 看 到 所 谓 动作 就 是 用 来 封装 传递 数据 的 ， 动 作 只 是 一 个 简单 的 对 象 ， 包 含 两 部 
分 : payload (数据 ) 和 type (XÆ) > type 是 一 个 字符 串 常 量 ， 用 来 标识 动作 。 


Store 


Stores 包含 应 用 的 状态 和 逻辑 ， 不 同 的 Store 管理 应 用 中 不 同 部 分 的 状态 。 如 
stores/TodoStore.js 


var AppDispatcher = require('../dispatcher/AppDispatcher'); 
var EventEmitter = require('events').EventEmitter; 

var TodoConstants = require('../constants/TodoConstants'); 
var assign = require('object-assign'); 


var CHANGE_EVENT = 'change'; 
var _todos = {}; 


// 先 定义 一 些 数据 处 理 方 法 
function create(text) { 
var id = (+new Date() + Math.floor(Math.random() * 999999)).toSt) 
_todos[id] = { 
id: id, 
complete: false, 
text: text 
J; 
} 
function update(id, updates) { 
_todos[id] = assign({}, _todos[id], updates); 
} 
ME ai 


var TodoStore = assign({}, EventEmitter.prototype, { 
// Getter 方法 暴露 给 外 部 获取 Store 数据 
getAll: function() { 
return _todos; 
tr 
// RR change 事件 
emitChange: function() { 
this.emit(CHANGE_EVENT); 
tr 
// 提供 给 外 部 View Fe change 事件 
addChangeListener: function(callback) { 


this.on(CHANGE_EVENT, callback); 


}); 
// 注册 到 dispatcher， 通 过 动作 类 型 过 滤 处 理 当 前 Store 关心 的 动作 
AppDispatcher.register(function(action) { 

var text; 


Switch(action.actionType) { 
case TodoConstants.TODO_CREATE: 
text = action.text.trim(); 
if (text !== '') { 
create(text); 
} 
TodoStore.emitChange(); 
break; 


case TodoConstants.TODO_UPDATE_TEXT: 
text = action.text.trim(); 
if (text !== '') { 
update(action.id, {text: text}); 
} 
TodoStore.emitChange(); 
break; 





在 Store 注册 给 dispatcher 的 回调 函数 中 会 接受 到 分 发 的 action， 因 为 每 个 action 

都 会 分 发 给 所 有 注册 的 回调 ， 所 以 回调 函数 里 面 要 判断 这 个 action 的 type 并 调用 
相关 的 内 部 方法 处 理 更 新 action 带 过 来 的 数据 〈payload) ， 再 通知 view 数据 变 
更 O 


Store 里 面 不 会 暴露 直接 操作 数据 的 方法 给 外 部 ， 暴 露 给 外 部 调用 的 方法 都 是 


Getter 方法 ， 没 有 Setter 方法 ， 唯 一 更 新 数据 的 手段 就 是 通过 在 dispatcher 注册 
的 回调 函数 。 


View 


View 就 是 React 组 件 ， 从 Store 获取 状态 (数据 ) » HX change 事件 处 理 。 如 
components/TodoApp.react.js 


var React = require('react'); 
var TodoStore = require('../stores/TodoStore' ); 


function getTodoState() { 
return { 
allTodos: TodoStore.getAll(), 
areAllComplete: TodoStore.areAllComplete( ) 


}; 


var TodoApp = React.createClass({ 


getInitialState: function() { 
return getTodoState(); 


ty 


componentDidMount: function() { 
TodoStore.addChangeListener(this._onChange) ; 


ty 


componentWillUnmount: function() { 
TodoStore.removeChangeListener(this._onChange); 


ty 


render: function() { 
returm<div>/* 22.7 /<7 div- 


ty 


_onChange: function() { 
this.setState(getTodoState()); 
} 
}); 


一 个 View 可 能 关联 多 个 Store 来 管理 不 同 部 分 的 状态 ， 得 益 于 React 更 新 View 
如 此 简单 ( setState ) ， 复 杂 的 逻辑 都 被 Store 隔离 了 。 


更 多 资料 


e Flux chat 很 简洁 明了 的 一 个 Slide 
e flux-chat source code 一 个 更 复杂 一 点 的 例子 


Redux 


Dan Abramov 在 React Europe 2015 上 作 了 一 场 令 人 印象 深刻 的 演示 Hot 
Reloading with Time Travel， 之 后 Redux 迅速 成 为 最 受 人 关注 的 Flux 实现 之 一 。 


Redux 把 自己 标榜 为 一 个 “可 预测 的 状态 容器 *， 其 实 也 是 Flux 里 面 “ 单 向 数据 流 ” 的 
思想 ， 只 是 它 充分 利用 函数 式 的 特性 ， 让 整个 实现 更 加 优雅 纯粹 ， 使 用 起 来 也 更 简 
单 。 

Redux(oldState) => newState 


Redux 是 超越 Flux 的 一 次 进化 。 


进化 Flux 


我 们 可 以 先 通过 对 比 Redux 和 Flux 的 实现 来 感受 一 下 Redux 带 来 的 惊艳 。 


首先 是 action creators > Flux 是 直接 在 action 里 面 调用 dispatch : 
export function addTodo(text) { 
AppDispatcher .dispatch({ 


type: ActionTypes.ADD_TODO, 
text: text 


}); 


Redux 把 它 简化 成 了 这 样 : 


export function addTodo(text) { 


return { 
type: ActionTypes.ADD_TODO, 
text: text 

}; 


这 一 步 把 dispatcher 和 action 解 稿 了 ， 很 快 我 们 就 能 看 到 它 带 来 的 好 处 。 


接 下 来 是 Store， 这 是 Flux 里 面 的 Store : 


let _todos = []; 
const TodoStore = Object.assign(new EventEmitter(), { 
getTodos() { 
return _todos; 
} 
}); 
AppDispatcher.register(function (action) { 
switch (action.type) { 
case ActionTypes.ADD_TODO: 


_todos = _todos.concat([action.text]); 
TodoStore.emitChange(); 
break; 
} 
}); 


export default TodoStore; 


Redux 把 它 简化 成 了 这 样 : 


const initialState = { todos: [] }; 
export default function TodoStore(state = initialState, action) { 
Switch (action.type) { 
case ActionTypes.ADD_TODO: 
return { todos: state.todos.concat([action.text]) }; 
default: 
return state; 


EE SSeS Ee 


同样 把 dispatch 从 Store 2m #14 T > Store 变 成 了 一 个 pure 
function : (state, action) => state 


什么 是 pure function 


如 果 一 个 函数 没有 任何 副作用 (side-effects)， 不 会 影响 任何 外 部 状态 ， 对 于 任何 
一 个 相同 的 输入 (参数) ， 无 论 何 时 调用 这 个 函数 总 是 返回 同样 的 结果 ， 这 个 函数 
就 是 一 个 pure function。 所 谓 side-effects 就 是 会 改变 外 部 状态 的 因素 ， 比 如 Ajax 
请 求 就 有 side-effects， 因 为 它 带 来 了 不 确定 性 。 


所 以 现在 Store 不 再 拥有 状态 ， 而 只 是 管理 状态 ， 所 以 首先 要 明确 一 个 概念 ，Store 
和 State 是 有 区 别 的 ，Store 并 不 是 一 个 简单 的 数据 结构 ，State 才 是 ，Store 会 包 
含 一 些 方法 来 管理 State， 比 如 获取 /修改 State 。 


基于 这 样 的 Store， 可 以 做 很 多 扩展 ， 这 也 是 Redux 强大 之 处 。 


来 源 : The Evolution of Flux Frameworks 


Redux 的 基础 概念 


三 个 基本 原则 


e 整个 应 用 只 有 唯一 一 个 可 信 数 据 源 ， 也 就 是 只 有 一 个 Store 

e State 只 能 通过 触发 Action 来 更 改 

e State 的 更 改 必须 写成 纯 函 数 ， 也 就 是 每 次 更 改 总 是 返回 一 个 新 的 State， 在 
Redux 里 这 种 函数 称 为 Reducer 


Actions 


Action 很 简单 ， 就 是 一 个 单纯 的 包含 { he payload } 的 对 象 ，type 是 一 
个 常量 用 来 标示 动作 类 型 ，payload 是 这 个 动作 携带 的 数据 。Action 需要 通过 
store.dispatch() 方法 来 发 送 


比如 一 个 最 简单 的 action : 


type: 'ADD_TODO', 
text: 'Build my first Redux app' 


一 般 来 说 ， 会 使 用 函数 (Action Creators) 来 生成 action， 这 样 会 有 更 大 的 灵活 
性 ，Action Creators 是 一 个 pure function， 它 最 后 会 返回 一 个 action 对 象 : 


function addTodo(text) { 
return { 
type: 'ADD_TODO', 
text 
} 
} 


所 以 现在 要 触发 一 个 动作 只 要 调用 dispatch : dispatch(addTodo(text)) 


后 会 讲 到 如 何 拿 到 store.dispatch 


Reducers 


Reducer 用 来 处 理 Action 触发 的 对 状态 树 的 更 改 。 


所 以 一 个 reducer 函数 会 接受 oldstate 和 action 两 个 参数 ， 返回 一 个 新 的 
state: (oldState, action) => newState 。 一 个 简单 的 reducer 可 能 类 似 这 
样 : 


const initialState = { 
ae se ae 
b: Ula 
}; 
function someApp(state = initialState, action) { 


switch (action.type) { 
case 'CHANGE_A': 


return { ...State, a: ‘Modified a’ }; 
case 'CHANGE_B': 

return { ...state, b: action.payload }; 
default: 


return state 


值得 注意 的 有 两 点 : 


e 我 们 用 到 了 object spread 语法 确保 不 会 更 改 到 oldState 而 是 返回 一 个 
newState 
e@ 对 于 不 需要 处 理 的 action， 直 接 返回 oldstate 


Reducer 也 是 pure function， 这 点 非常 重要 ， 所 以 绝对 不 要 在 reducer 里 面 做 一 
些 引 入 side-effects 的 事情 ， 比 如 : 


e 直接 修改 state 参数 对 象 
。 请 求 API 
e 调用 不 纯 的 函数 ， 比 如 Data.now() Math.random() 


因为 Redux 里 面 只 有 一 个 Store， 对 应 一 个 State 状态 ， 所 以 整个 State 对 象 就 是 
由 一 个 reducer 哆 数 管理 ， 但 是 如 果 所 有 的 状态 更 改 逻 辑 都 放 在 这 一 个 reducer 里 
面 ， 显 然 会 变 得 越 来 越 巨 大 ， 越 来 越 难以 维护 。 得 益 于 纯 函 数 的 实现 ， 我 们 只 需要 
稍微 变通 一 下 ， 让 状态 树 上 的 每 个 字段 都 有 一 个 reducer HARK LRT UD Mm 
很 小 的 reducer 了 : 


function someApp(state = {}, action) { 
return { 
a: reducerA(state.a, action), 
b: reducerB(state.b, action) 


】 


对 于 reducera 和 reducerB 来 说 ， 他 们 依然 是 形 如 : (oldState, action) 
=> newState 的 函数 ， 只 是 这 时 候 的 state 不 是 整个 状态 树 ， 而 是 树 上 的 特定 字 
段 ， 每 个 reducer 只 需要 判断 action， 管 理 自己 关心 的 状态 字段 数据 就 好 了 。 


Redux 提供 了 一 个 工具 函数 combineReducers 来 简化 这 种 reducer 合并 : 


import { combineReducers } from 'redux'; 


const someApp = combineReducers({ 
a: reducerA, 
b: reducerB 


3); 


如 果 reducer 函数 名 字 和 字段 名 字 相 同 ， 利 用 ES6 的 Destructuring 可 以 进一步 简 
化 成 : combineReducers({ a, b }) 


象 someApp 这 种 管理 整个 State 的 reducer， 可 以 称 为 root reducer ° 


Store 


现在 有 了 Action 和 Reducer > Store 的 作用 就 是 连接 这 两 者 ，Store 的 作用 有 这 么 
几 个 : 


e Hold 住 整 个 应 用 的 State 状态 树 


e 提供 一 个 getState() FARR State 
e 提供 一 个 dispatch() 方法 发 送 action 7x State 
e 提供 一 个 subscribe() 方法 注册 回调 函数 监听 State 的 更 改 


创建 一 个 Store 很 容易 ， 将 root reducer 函数 传递 给 createStore 方法 即 可 : 
import { createStore } from 'redux'; 


import someApp from './reducers'; 
let store = createStore(someApp) ; 


// 你 也 可 以 额外 指定 一 个 初始 State (initialState) ， 这 对 于 服务 端 浑 染 很 有 用 
// let store = createStore(someApp, window.STATE_FROM_SERVER) ; 


现在 我 们 就 拿 到 了 store.dispatch ， 可 以 用 来 分 发 action 了 : 
let unsubscribe = store.subscribe(() => console.log(store.getState\ 


// Dispatch 
store.dispatch({ type: 'CHANGE A' }); 
store.dispatch({ type: 'CHANGE_B', payload: 'Modified b' }); 


// Stop listening to state updates 
unsubscribe(); 


4] — wT 





Data Flow 


以 上 提 到 的 store.dispatch(action) -> reducer(state, action) -> 
store.getState() 其 实 就 构成 了 一 个 “ 单 向 数据 流 ”， 我 们 再 来 总 结 一 下 。 
1. 调用 store.dispatch(action) 


Action 是 一 个 包含 { type, payload } 的 对 象 ， 它 描述 了 “发 生 了 什么 ”， 比 
ho: 


{ type: 'LIKE_ARTICLE', articleID: 42 } 
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } } 
{ type: 'ADD_TODO', text: 'Read the Redux docs.' } 


让 og" 





你 可 以 在 任何 地 方 调 用 store.dispatch(action) ， 比 如 组 件 内 部 ，Ajax 回调 区 
数 里 面 等 等 。 


2. Action 会 触发 给 Store 指定 的 root reducer 


root reducer 会 返回 一 个 完整 的 状态 树 ，State 对 象 上 的 各 个 字段 值 可 以 由 各 自 的 
reducer 函数 处 理 并 返回 新 的 值 。 


e reducer 函数 接受 (state, action) 两 个 参数 
e reducer 有 函数 判断 action.type 然后 处 理 对 应 的 action.payload 数据 来 
更 新 并 返回 一 个 新 的 state 


3. Store 会 保存 root reducer 返回 的 状态 树 


新 的 State AŽ W 4) State， 然 后 所 有 store.subscribe(listener) 注册 的 
回调 函数 会 被 调用 ， 在 回调 部 数 里 面 可 以 通过 store.getState() 拿 到 新 的 
State ° 


这 就 是 Redux 的 运作 流程 ， 接 下 来 看 如 何在 React 里 面 使 用 Redux ° 


在 React 应 用 中 使 用 Redux 


和 Flux 类 似 ，Redux 也 是 需要 注册 一 个 回调 函数 store.subscribe(listener) 
来 获取 State 的 更 新 ， 然 后 我 们 要 在 listener 里 面 调用 setState() 来 更 新 
React 组 件 。 


Redux 官方 提供 了 react-redux 来 简化 React 和 Redux 之 间 的 绑 定 ， 不 再 需要 像 
Flux 那样 手动 注册 了解 绑 回 调 函 数 。 


接 下 来 看 一 下 是 怎么 做 到 的 ，react-redux 只 有 两 个 API 


<Provider> 


<Provider> 作为 一 个 容器 组 件 ， 用 来 接受 Store， 并 且 让 Store 对 子 组 件 可 用 ， 
用 法 如 下 : 


import { render } from 'react-dom'; 
import { Provider } from 'react-redux'; 
import App from './app'; 


render ( 
<Provider store={store}> 
<App /> 
</Provider>, 
document.getElementById('root' ) 
); 


这 时 候 <Provider> 里 面 的 子 组 件 <App /> 才 可 以 使 用 connect 方法 关联 
Store。 


<Provider> 的 实现 很 简单 ， 他 利用 了 React 一 个 (暂时 ) 隐藏 的 特性 
Contexts ， Context 用 来 传递 一 些 父 容 器 的 属性 对 所 有 子孙 组 件 可 见 ， 在 某 
些 场景 下 面 避免 了 用 props 传递 多 层 组 件 的 繁琐 ， 要 想 更 详细 了 解 Contexts 
可 以 参考 这 篇 文章 。 


Connect 


connect() 这 个 方法 略微 复杂 一 点 ， 主 要 是 因为 它 的 用 法 非常 灵 

活 : connect([mapStateToProps], mapDispatchToProps], [mergeProps], 
[options]) ， 它 最 多 接受 4 个 参数 ， 都 是 可 选 的 ， 并 且 这 个 方法 调用 会 返回 另 一 
个 函数 ， 这 个 返回 的 函数 来 接受 一 个 组 件 类 作为 参数 ， 最 后 才 返 回 一 个 和 Redux 
store 关联 起 来 的 新 组 件 ， 类 似 这 样 


class App extends Component { ... } 


export default connect()(App); 


这 样 就 可 以 在 App 这 个 组 件 里 面 通过 props $2] Store 的 dispatch 方法 ， 
但 是 注意 现在 的 App 没有 监听 Store 的 状态 更 改 ， 如 果 要 监听 Store 的 状态 更 
改 ， 必 须要 指定 mapStateToProps 参数 。 


先 来 看 它 的 参数 : 


e [mapStateToProps(state, Bene eo IO stateProps] : 第 一 个 可 选 参数 
是 一 个 函数 ， 只 有 指定 了 这 个 参数 ， 这 个 关联 (connected) 组 件 才 会 监听 
Redux Store 的 更 新 ， 每 次 更 新 都 会 调用 mapStateToProps 这 个 函数 ， 返 
回 一 个 字面 量 对 象 将 会 合并 到 组 件 的 props 属性 。 ownProps 是 可 选 的 第 
二 个 参数 ， 它 是 传递 给 组 件 的 props ， 当 组 件 获取 到 新 的 props 
时 ， ownProps 都 会 拿 到 这 个 值 并 且 执 行 mapStateToProps 这 个 函数 。 

e [mapDispatchProps(dispatch, [ownProps]): dispatchProps] : 过 个 函 
数 用 来 指定 如 何 传递 dispatch 给 组 件 ， 在 这 个 函数 里 面 lpaloh 
action creator， 返 回 一 个 字面 量 对 象 将 会 合并 到 组 件 的 props 属性 ， 这 样 关 
联 组 件 可 以 直接 通过 props 调用 到 action ，Redux 提供 了 一 个 
bindActionCreators() 辅助 函数 来 简化 这 种 写法 。 如 果 省 略 这 个 参数 ， 默 
认 直 接 把 dispatch 作为 props 传 入 。 ownProps 作用 同上 。 


剩 下 的 两 个 参数 比较 少 用 到 ， 更 详细 的 说 明 参 看 官方 文档 ， 其 中 提供 了 很 多 简单 清 
晰 的 用 法 示例 来 说 明 这 些 参数 。 


一 个 具体 一 点 的 例子 


Redux 创建 Store > Action > Reducer 这 部 分 就 省 略 了 ， 这 里 只 看 react-redux 的 部 


分 。 


import React, { Component } from 'react'; 
import someActionCreator from './actions/someAction'; 
import * as actionCreators from './actions/otherAction'; 


function mapStateToProps(state) { 
return { 
propName: state.propName 


}; 


function mapDispatchProps(dispatch) { 
return { 
someAction: (arg) => dispatch(someActionCreator(arg)), 
otherActions: bindActionCreators(actionCreators, dispatch) 


je 


class App extends Component { 
render() { 

// `mapStateToProps 和 “mapDispatchProps’ &Waj Rake “props” 
const { propName, someAction, otherActions } = this.props; 
return ( 

<div onClick={someAction.bind(this, '‘arg')}> 

{propName} 
</div> 


); 


export default connect(mapStateToProps, mapDispatchProps) (App); 
了 | 
如 前 所 述 ， 这 个 connected 的 组 件 必须 放 到 <Provider> 的 容器 里 面 ， 当 State 


更 改 的 时 候 就 会 自动 调用 mapStateToProps 和 mapDispatchProps 从 而 更 新 
组 件 的 props 。 组 件 内 部 也 可 以 通过 props 调用 到 action， 如 果 没 有 省 略 了 


mapDispatchProps ， 组 件 要 触发 action 就 必须 手动 djspatch， 类 似 这 


样 : this.props.dispatch(someActionCreator('arg')) ° 


表单 


表单 不 同 于 其 他 HTML 元 素 ， 因 为 它 要 响应 用 户 的 交互 ， 显 示 不 同 的 状态 ， 所 以 在 
React 里 面 会 有 点 特殊 。 


KR JB PE 


表单 元 素 有 这 么 几 种 属于 状态 的 属性 : 


e value ， 对 应 <input> 和 <textarea> 所 有 
e checked ， 对 应 类 型 为 ”checkbox 和 radio 的 <input> 所 有 
e selected ， 对 应 <option> 所 有 


在 HTML 中 <textarea> 的 值 可 以 由 子 节点 (LA) 赋值 ， 但 是 在 React 中 ， 要 


用 value 来 设置 。 
表单 元 素 包 人 钨 以 上 任意 一 种 状态 属性 都 支持 onChange 事件 监听 状态 值 的 更 改 。 
针对 这 些 状 态 属性 不 同 的 处 理 策略 ， 表 单元 素 在 React 里 面 有 两 种 表现 形式 。 


党 控 组 件 
对 于 设置 了 上 面 提 到 的 对 应 “状态 属性 * 值 的 表单 元 素 就 是 受 控 表单 组 件 ， 比 如 : 


render: function() { 
return <input type="text" value="hello"/>; 


一 个 受 控 的 表单 组 件 ， 它 所 有 状态 属性 更 改 涉 及 UI 的 变更 都 由 React 来 控制 〈 状 

ABE Ul) 。 比 如 上 面 代码 里 的 <input> 输入 框 ， 用 户 输入 内 容 ， 用 户 输 

入 的 内 容 不 会 显示 (输入 框 总 是 显示 状态 属性 value 的 值 hello ) RA AH 
履 我 们 的 认 知 了 ， 所 以 说 这 是 受 控 组 件 ， 不 是 原来 默认 的 表单 元 素 了 。 


如 果 你 希望 输入 的 内 容 反 馈 到 输入 框 ， 就 要 用 onchange 事件 改变 状态 属性 
value 的 值 : 


getInitialState: function() { 
return {value: 'hello'}; 
ty 
handleChange: function(event) { 
this.setState({value: event.target.value}); 
tr 
render: function() { 
var value = this.state.value; 
return <input type="text" value={value} onChange={this.handleCt 





使 用 这 种 模式 非常 容易 实现 类 似 对 用 户 输入 的 验证 ， 或 者 对 用 户 交 互 做 额外 的 处 
理 ， 比 如 截断 最 多 输入 140 个 字符 : 


handleChange: function(event) { 
this.setState({value: event.target.value.substr(0, 140)}); 


非 受 控 组 件 

和 受 控 组 件 相 对 ， 如 果 表 单元 素 没有 设置 自己 的 “状态 属性 "， 或 者 属性 值 设置 为 
null ， 这 时 候 就 是 非 受 控 组 件 。 

它 的 表现 就 符合 普通 的 表单 元 素 ， 正 常 响应 用 户 的 操作 。 

同样 ， 你 也 可 以 绑 定 onchange 事件 处 理 交 互 。 


如 果 你 想 要 给 “状态 属性 ”设置 默认 值 ， 就 要 用 React 提供 的 特殊 属性 
defaultValue ， 对 于 checked 会 有 defaultChecked ， <option> 也 是 使 
用 defaultValue 。 


为 什么 要 有 受 控 组 件 ? 


引入 受 控 组 件 不 是 说 它 有 什么 好 处 ， 而 是 因为 React 4 UI 泻 染 机 制 ， 对 于 表单 元 
素 不 得 不 引入 这 一 特殊 的 处 理 方式 。 


在 浏览 器 DOM 里 面 是 有 区 分 attribute 和 property % ° attribute 是 在 HTML 里 指 
定 的 属性 ， 而 每 个 HTML 元 素 在 JS 对 应 是 一 个 DOM 节点 对 象 ， 这 个 对 象 拥 有 的 
属性 就 是 property (可 以 在 console 里 展开 一 个 DOM 节点 对 象 看 一 下 ，HTML 
attributes 只 是 对 应 其 中 的 一 部 分 属性 ) > attribute 对 应 的 property 会 从 attribute 
拿 到 初始 值 ， 有 些 会 有 相同 的 名 称 ， 但 是 有 些 名 称 会 不 一 样 ， 比 如 attribute 

class 对 应 的 property 就 是 className ° (详细 解释 : .prop，.prop() vs 
.attr() ) 


回 到 React 里 的 <input> 输入 框 ， 当 用 户 输入 内 容 的 时 候 ， 输 入 框 的 value 
property 会 改变 ， 但 是 value attribute 依然 会 是 HTML 上 指定 的 值 (attribute 要 
用 setAttribute 去 更 改 ) 。 


React 组 件 必须 呈现 这 个 组 件 的 状态 视图 ， 这 个 视图 HTML 是 由 render 生成 ， 
所 以 对 于 


render: function() { 
return <input type="text" value="hello"/>; 


在 任意 时 刻 ， 这 个 视图 总 是 返回 一 个 显示 hello 的 输入 框 。 


<select> 


在 HTML 中 <select> 标签 指定 选中 项 都 是 通过 对 应 <option> 的 
selected 属性 来 做 的 ， 但 是 在 React 修改 成 统一 使 用 value 。 


所 以 没有 一 个 selected 的 状态 属性 。 


<select value="B"> 
<option value="A">Apple</option> 
<option value="B">Banana</option> 
<option value="C">Cranberry</option> 


</select> 


你 可 以 通过 传递 一 个 数组 指定 多 个 选中 项 : <select multiple={true} value= 
{['B', 'C']}> 


React 提供 了 两 个 方法 renderToString 和 renderToStaticMarkup 用 来 将 组 
和 (Virtual DOM) 输出 成 HTML 字符 串 ， 这 是 React 服务 器 端 泻 染 的 基础 ， 它 移 
wT IRA Z: 端 对 于 浏览 Ww 器 环境 的 依赖 ’ 所 以 让 服务 器 mia 染 变 成 了 一 件 有 吸引 力 的 


服务 器 端 泻 染 除了 要 解决 对 浏览 器 环境 的 依赖 ， 还 要 解决 两 个 问题 : 


可 以 共享 代码 
路 由 可 以 统一 处 理 


e 前 后 端 
o 前 后 端 


React 生态 提供 了 很 多 选择 方案 ， 这 里 我 们 选用 Redux 和 react-router 来 做 说 明 。 


Redux 


Redux 提供 了 一 套 类 似 Flux 的 单 向 数据 流 ， 整 个 应 用 只 维护 一 个 Store， 以 及 面向 
函数 式 的 特性 让 它 对 服务 器 端 泻 染 支 持 很 友好 。 


2 分 钟 了 解 Redux 是 如 何 运作 的 


关于 Store : 


e 整个 应 用 只 有 一 个 唯一 的 Store 

e Store 对 应 的 状态 树 (State) ， 由 调用 一 个 reducer 有 函数 (root reducer) 生成 
e 状态 树 上 的 每 个 字段 都 可 以 进一步 由 不 同 的 reducer 函数 生成 

e Store 包含 了 几 个 方法 比如 dispatch, getState 来 处 理 数据 流 

e Store 的 状态 树 只 能 由 dispatch(action) 来 触发 更 改 


Redux 的 数据 流 : 


e action 是 一 个 包含 { type, payload } 的 对 象 

e reducer 函数 通过 store.dispatch(action) an 

e reducer 函数 接受 (state, action) 两 个 参数 ， 返 回 一 个 新 的 state 

e reducer 函数 判断 action.type 然后 处 理 对 应 的 action.payload 数据 来 
更 新 状态 树 


所 以 对 于 整个 应 用 来 说 ， 一 个 Store 就 对 应 一 个 Ul 快照 ， 服 务 器 端 泻 染 就 简化 成 
了 在 服务 器 端 初 始 化 Store， 将 Store 传 入 应 用 的 根 组 件 ， 针 对 根 组 件 调 用 
renderToString 就 将 整个 应 用 输出 成 包含 了 初始 化 数据 的 HTML © 


react-router 


react-router 通过 一 种 声明 式 的 方式 匹配 不 同 路 由 决定 在 页 面 上 展示 不 同 的 组 件 ， 
并 且 通 过 props 将 路 由 信息 传递 给 组 件 使 用 ， 所 以 只 要 路 由 变更 ，props 就 会 变 
化 ， 触 发 组 件 re-render 。 


假设 有 一 个 很 简单 的 应 用 ， 只 有 两 个 页 面 ， 一 个 列表 页 /List 和 一 个 详情 页 
/item/:id ， 点 击 列表 上 的 条 目 进 入 详情 页 。 


可 以 这 样 定义 路 由 ， ,/routes.js 


import React from 'react'; 
import { Route } from 'react-router'; 
import { List, Item } from './components'; 


// 无 状态 (stateless) 组 件 ， 一 个 简单 的 容器 ，react-router 会 根据 route 
// 规则 匹配 到 的 组 件 作为 “props.children” 传 入 
const Container = (props) => { 
return ( 
<div>{props.children}</div> 
); 
}; 


// route 规则 : 
// - /list ”显示 “List ”组 件 
// - `/item/:id” ”显示 “Item” 组 件 
const routes = ( 
<Route path="/" component={Container} > 
<Route path="list" component={List} /> 
<Route path="item/:id" component={Item} /> 
</Route> 


); 


export default routes; 


从 这 里 开始 ， 我 们 通过 这 个 非常 简单 的 应 用 来 解释 实现 服务 器 端 泻 染 前 后 端 涉及 的 
一 些 细节 问题 。 


Reducer 


Store 是 由 reducer 产生 的 ， 所 以 reducer 实际 上 反映 了 Store 的 状态 树 结 构 


./reducers/index.js 


import listReducer from './list'; 
import itemReducer from './item'; 


export default function rootReducer(state = {}, action) { 
return { 


list: listReducer(state.list, action), 
item: itemReducer(state.item, action) 


ia 


rootReducer 的 state 参数 就 是 整个 Store 的 状态 树 ， 状 态 树 下 的 每 个 字段 
对 应 也 可 以 有 自己 的 reducer， 所 以 这 里 引入 了 listReducer 和 

itemReducer ， 可 以 看 到 这 两 个 reducer 的 state 参数 就 只 是 整个 状态 树 上 对 应 
的 list 和 item 字段 。 


具体 到 ./reducers/list.js 
const initialState = []; 


export default function listReducer(state = initialState, action) | 
Switch(action.type) { 
case 'FETCH_LIST_SUCCESS': return [...action.payload]; 
default: return state; 


list 就 是 一 个 包含 items 的 简单 数组 ， 可 能 类 似 这 种 结构 : [{ id: 0, name: 
'first item'}, {id: 1, name: 'second item'}] ， 从 


'FETCH_LIST_SUCCESS' 的 action.payload 获得 。 


然后 是 ./reducers/item.js ， 处 理 获 取 到 的 item 数据 
const initialState = {}; 


export default function listReducer(state = initialState, action) | 
Switch(action.type) { 
case 'FETCH_ITEM_SUCCESS': return [...action.payload]; 
default: return state; 


} 
} 


二 | 


Action 


对 应 的 应 该 要 有 两 个 action 来 获取 list 和 item > AX reducer 更 改 Store， 这 里 我 
们 定义 fetchList 和 fetchItem 两 个 action。 


./actions/index.js 


import fetch from 'isomorphic-fetch'; 


export function fetchList() { 
return (dispatch) => { 
return fetch('/api/list’ ) 
.then(res => res.json()) 
.then(json => dispatch({ type: 'FETCH_LIST_SUCCESS', paylot 


export function fetchItem(id) { 
return (dispatch) => { 
if (!id) return Promise.resolve(); 
return fetch( /api/item/${id} ) 
.then(res => res.json()) 
.then(json => dispatch({ type: 'FETCH_ITEM_SUCCESS', paylot 





isomorphic-fetch 是 一 个 前 后 端 通用 的 Ajax 实现 ， 前 后 端 要 共享 代码 这 点 很 重要 。 


另外 因为 涉及 到 异步 请 求 ， 这 里 的 action 用 到 了 thunk， 也 就 是 函数 ，redux 通过 
thunk-middleware 来 处 理 这 类 action， 把 函数 当 作 普通 的 action dispatch 就 好 
了 ， 上 比如 dispatch(fetchList()) 


Store 


我 们 用 一 个 独立 的 ./store.js ， 配 置 (比如 Apply Middleware) 生成 Store 


import { createStore } from 'redux'; 
import rootReducer from './reducers'; 


// Apply middleware here 
YA 


export default function configureStore(initialState) { 
const store = createStore(rootReducer, initialState); 
return store; 


react-redux 


接 下 来 就 是 实现 <list> ， <Item> 组 件 ， 然 后 把 Redux 和 React 组 件 关联 起 
来 ， 具 体 细 节 参 见 react-redux 


./app.js 


import 
import 
import 
import 
import 
import 
import 


MY 
const 


React from 'react'; 

{ render } from 'react-dom'; 

{ Router } from 'react-router'; 

createBrowserHistory from 'history/lib/createBrowserHistory 
{ Provider } from 'react-redux'; 

routes from './routes'; 

configureStore from './store'; 


INITIAL STATE ”来 自 服务 器 端 演 染 ， 下 一 部 分 细 说 
initialState = window.__INITIAL_STATE__; 


const store = configureStore(initialState) ; 
const Root = (props) => { 
return ( 
<div> 


<Provider store={store}> 
<Router history={createBrowserHistory( )}> 
{routes} 
</Router> 
</Provider> 


</div> 


); 


render(<Root />, document.getElementById('root')); 


E 





至 此 ， 客户 端 部 分 结束 


Server Rendering 


接 下 来 的 服务 器 端 就 比较 简单 了 ， 获 取 数 据 可 以 调用 action’ routes 在 服务 器 端的 


处 理 参考 


react-router server rendering， 在 服务 器 端 用 一 个 match 方法 将 拿 到 的 


request url 匹配 到 我 们 之 前 定义 的 routes， 解 本 成 和 客户 端 一 致 的 props 对 象 传递 


给 组 件 。 


./server.js 


import express from 'express'; 


import React from 'react'; 

import { renderToString } from 'react-dom/server'; 
import { RoutingContext, match } from 'react-router'; 
import { Provider } from 'react-redux'; 

import routes from './routes'; 

import configureStore from './store'; 


const app = express(); 


function renderFullPage(html, initialState) { 
return 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
</head> 
<body> 
<div id="root"> 
<div> 
${htm1} 
</div> 
</div> 
<script> 
window. _INITIAL STATE = ${JSON.stringify(initialState)}, 
</script> 
<script src="/static/bundle.js"></script> 
</body> 
</html> 


app.use((req, res) => { 
match({ routes, location: req.url }, (err, redirectLocation, renc 
if (err) { 
res.status(500).end( Internal Server Error ${err} ); 
} else if (redirectLocation) { 
res.redirect(redirectLocation.pathname + redirectLocation.seé 
} else if (renderProps) { 
const store = configureStore(); 
const state = store.getState(); 


Promise.all([ 
store.dispatch(fetchList()), 
store.dispatch(fetchItem(renderProps.params.id) ) 
]) 
.then(() => { 
const html = renderToString( 
<Provider store={store}> 
<RoutingContext {...renderProps} /> 
</Provider> 
); 
res.end(renderFullPage(html, store.getState())); 
}); 
} else { 
res.status(404).end('Not found'); 
} 
+); 
}); 


[E 





服务 器 端 泻 染 部 分 可 以 直接 通过 共用 客户 端 store.dispatch(action) 来 统一 获 
取 Store 数据 。 另 外 注意 renderFullPage 生成 的 页 面 HTML 在 React 组 件 
mount 的 部 分 ( <div id="root"> )， 前 后 端的 HTML 结构 应 该 是 一 致 的 。 然 后 要 
把 store 的 状态 树 写 入 一 个 全 局 变量 ( _INITIAL_STATE_ ) ， 这 样 客户 端 
初始 化 render 的 时 候 能 够 校 验 服务 器 生成 的 HTML 结构 ， 并 且 同 步 到 初始 化 状 
态 ， 然 后 整个 页 面 被 客户 端 接管 。 


最 后 关于 页 面 内 链接 跳 转 如 何 处 理 ? 


react-router 提供 了 一 个 <Link> 组 件 用 来 替代 <a> 标签 ， 它 负责 管理 浏览 器 
history ， 从 而 不 是 每 次 点 击 链 接 都 去 请 求 服务 器 ， 然 后 可 以 通过 绑 定 onclick 事 
件 来 作 其 他 处 理 。 


比如 在 /list 页 面 ， 对 于 每 一 个 item 都 会 用 <Link> 绑 定 一 个 route 
url: /item/:id ， 并 且 绑 定 onClick 去 触发 dispatch(fetchItem(id)) 获 
取 数 据 ， 显 示 详情 页 内 容 。 


更 乡 参考 


React 入 门 教程 


e Universal (lsomorphic) 
e isomorphic-redux-app 


[最 初 发 布 于 Coding Blog] 
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